<template>
	<div class="famyily-hall0-wrap">
		<div class="home-wrap">
			<div class="topTitle flex">
				<a href="/" class="logo">
					<h1 class="ell" style="max-width: 15.62rem;">{{title}}</h1>
				</a>
				<div class="fract flex">
					<span class="ell">{{user.nickname}}</span>
					<router-link to="/login" v-if="!user.logined">登录</router-link>
					<a href="javascript:;" @click="loginOut" v-else>退出</a>
				</div>
			</div>
			<swiper :swiper-slides='swiperSlides'></swiper>
			<div class="halllist">
				<div class="h_title">
					<h2>热门推荐</h2>
				</div>
				<div class="room-list-ul">
					<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="40">
						<ul class="fix">
							<li v-for="(item,index) in roomList" :key="index">
								<router-link :to="{name:'room',params:{eng_name:item.eng_name,roomid: item.room_id }}" class="img">
									<i class="password_bg" v-if="item.password"></i>
									<img class="lazy" :data-src="item.icon | roomDefault" :src="lazyload">
									<p class="txt fix">
										<template v-if="item.room_qualification">
											<b class="v m" title="实名认证" v-if="item.room_qualification === 1">实名</b>
											<b class="v" title="机构认证" v-else>认证</b>
										</template>
										<span class="name room_name ell">{{item.room_name}}</span>
									</p>
									<p class="txt fix">
										<span class="fl live live_color" v-if="item.is_live"><b class="red_dot_bg"></b>在线中</span>
										<span class="fl c222" v-else><b class="gray_dot_bg"></b>休息中</span>
										<span class="fr ell people-number" v-if="item.sum_users"><i></i>{{item.sum_users}}人</span>
									</p>
								</router-link>
							</li>
						</ul>
						<div class="loading" v-show="tips">全部加载完咯</div>
						<div class="loading" v-show="loading"><img src="@/assets/images/loading.gif" alt="" class="loading-img" /><span>玩命加载中...</span></div>
					</div>
				</div>
			</div>
		</div>
		<bind-tips></bind-tips>
		<back-to-top></back-to-top>
	</div>
</template>

<script>
	import {getRoomList,getHallTeamBanners} from '@/api/hall'
	import {mapGetters} from 'vuex'
	import {customLazyLoad} from '@/utils'
	import bindTips from '@/views/bind_phone'
	import mixin from '@/mixins/removeLoading'
	import swiper from '@/components/Swiper/index.vue'
	import banner1 from '@/assets/images/default/banner1.jpg'
	import banner2 from '@/assets/images/default/banner2.jpg'
	import banner3 from '@/assets/images/default/banner3.jpg'
	import officialBanner1 from '@/assets/images/deticateIp/official-banner1.png'
	import officialBanner2 from '@/assets/images/deticateIp/official-banner2.png'
	import officialBanner3 from '@/assets/images/deticateIp/official-banner3.png'
	import BackToTop from '@/components/BackToTop'
	export default {
		name: 'familyTemplate0',
		props:{
			title:{
				type:String
			}
		},
		filters:{
			roomDefault(img){
				if(!img){
					let roomDefaultSrc = !window.is_official ? require('@/assets/images/default/room-icon-default.jpg') : require('@/assets/images/deticateIp/room-default-over.jpg')
					return roomDefaultSrc
				}else{
					return img
				}
			}
		},
		mixins: [mixin],
		inject:['skeletonLoad'],
		computed:{
			...mapGetters([
			  'user',
				'token'
			])
		},
		components:{
			bindTips,
			swiper,
			BackToTop
		},
		data(){
			return{
				swiperSlides:[],
				listQuery:{
					page:1,
					pageSize:100,
					official_more:1,
					eng_name:this.$route.params.eng_name
				},
				roomList:[],
				tips:false,
				loading:false,
				busy:true,
				lazyload: !window.is_official ? require('@/assets/images/default/lazyload.jpg') : require('@/assets/images/deticateIp/official-lazyload.png')
			}
		},
		created(){
			this.getRoomList()
			getHallTeamBanners({eng_name:this.$route.params.eng_name}).then(res=>{
				if(res.data.length>0){
					this.swiperSlides = res.data
				}else{
					if(!window.is_official){
						this.swiperSlides = [{ad_url:banner1},{ad_url:banner2},{ad_url:banner3}]
					}else{
						this.swiperSlides = [{ad_url:officialBanner1},{ad_url:officialBanner2},{ad_url:officialBanner3}]
					}
				}
				this.skeletonLoad()
			}).catch(err=>{
				this.skeletonLoad()
			})
		},
		methods:{
			getRoomList(){
				this.loading = true
				getRoomList(this.listQuery).then(response=>{
					this.listQuery.page += 1
					this.roomList.push(...response.data.data)
					if(response.data.data.length === this.listQuery.pageSize){
						this.busy = false
					}else{
						this.busy = true
						this.loading = false
						this.tips = true
					}
					this.$nextTick(()=>{
						customLazyLoad('.lazy')
					})
				})
			},
			loadMore(){
				this.busy = true
				this.loading = true
				this.tips = false
				setTimeout(() => {
					this.getRoomList()
				}, 1000);
			},
			loginOut(){
				this.$store.dispatch('LogOut').then(res=>{
					if(localStorage.getItem("noalertbind_"+this.user.uid)){
						localStorage.removeItem("noalertbind_"+this.user.uid)
					}
					location.reload()
				}).catch(err=>{
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/styles/hall.scss';
	.swiper-loading-wrap{
		position: relative;
		height:9.37rem;
		.tv-loading{
			background-color: #eaeaea;
		}
	}
</style>

